<template>
  <div>
    <div>
      <el-form ref="LdForm" :model="LdForm" label-width="80px" :inline="true">
        <el-form-item label="所属单元">
          <el-input v-model="LdForm.location"></el-input>
        </el-form-item>
        <el-form-item label="单元数量">
          <el-input v-model="LdForm.lno"></el-input>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="sel(LdForm)">搜索</el-button>
      </el-form>
    </div>
    <el-header>
      <el-link>
        <el-button type="primary" @click="dialogVisible = true" icon="el-icon-circle-plus-outline">添加</el-button>
      </el-link>
    </el-header>
    <div style="height: 900px">

      <el-dialog
        title="添加"
        :visible.sync="dialogVisible"
        width="30%"

      >
        <el-form style="width: 40% " :model="LdForm" ref="LdForm" label-width="150px" class="demo-ruleForm">

          <el-form-item label="所属单元" prop="location">
            <el-input v-model="LdForm.location"></el-input>
          </el-form-item>
          <el-form-item label="单元数量" prop="lno">
            <el-input v-model="LdForm.lno"></el-input>
          </el-form-item>
          <el-form-item label="楼层数" prop="lnumber">
            <el-input v-model="LdForm.lnumber"></el-input>
          </el-form-item>
          <el-form-item label="总人数" prop="total">
            <el-input v-model="LdForm.total"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="note">
            <el-input v-model="LdForm.note"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitForm('LdForm')">确 定</el-button>
  </span>
      </el-dialog>
      <el-table
        :data="users"
        style="width: 100% "
      >
        <el-table-column
          prop="id"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="location"
          label="所属单元"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.location }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lno"
          label="单元数量"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.lno }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lnumber"
          label="楼层数"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.lnumber }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="total"
          label="总人数"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.total }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="note"
          label="备注"
          width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.note }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作" height="100px">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="del(scope.row.id)"
            >删除
            </el-button>
            <el-button type="primary" icon="el-icon-edit-outline"  @click="edit(scope.row)" plain>编辑</el-button>
            <el-dialog
              title="编辑"
              :visible.sync="updateDialogVisible"
              width="30%"
            >
              <el-form style="width: 40%" :model="LdForm"  ref="LdForm" label-width="100px" class="demo-ruleForm">
                <el-form-item  label="编号" prop="id">
                  <el-input v-model="LdForm.id" :disabled=true></el-input>
                </el-form-item>
                <el-form-item label="所属单元" prop="location">
                  <el-input v-model="LdForm.location"></el-input>
                </el-form-item>
                <el-form-item label="单元数量" prop="lno">
                  <el-input v-model="LdForm.lno"></el-input>
                </el-form-item>
                <el-form-item label="楼层数量" prop="lnumber">
                  <el-input v-model="LdForm.lnumber"></el-input>
                </el-form-item>
                <el-form-item label="总人数" prop="total">
                  <el-input v-model="LdForm.total"></el-input>
                </el-form-item>
                <el-form-item label="备注" prop="note">
                  <el-input v-model="LdForm.note"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
            <el-button @click="updateDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="update(LdForm)">确 定</el-button>
            </span>
            </el-dialog>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  inject: ['reload'],
  name: 'ld',
  data () {
    return {
      msg: 'hello world',
      users: [],
      input: '',
      dialogVisible: false,
      updateDialogVisible: false,
      LdForm: {
        location: '',
        lno: '',
        lnumber: '',
        total: '',
        note: ''
      },
      LdForm1: {
        id: '',
        location: '',
        lno: '',
        lnumber: '',
        total: '',
        note: ''
      }
    }
  },
  created () {
    const that = this
    this.$axios.get('http://localhost:8001/Ld/list/')
      .then(function (response) {
        that.users = response.data
        console.log(that.users)
      })
  },
  methods: {
    async del (oid) {
      const confirmResult = await this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') {
        return this.$message.info('已取消')
      }
      this.$axios.post('http://localhost:8001/Ld/delete?id=' + oid)
      this.reload()
    },
    submitForm (querystring) {
      var qs = require('querystring')
      this.$axios.post('http://localhost:8001/Ld/add', qs.stringify(this.LdForm))
      this.dialogVisible = false
      this.reload()
    },
    edit (LdForm) {
      this.LdForm = LdForm
      this.updateDialogVisible = true
    },
    update () {
      var qs = require('querystring')
      this.$axios.post('http://localhost:8001/Ld/update', qs.stringify(this.LdForm))
      this.updateDialogVisible = false
      this.reload()
    },
    sel (LdForm) {
      var qs = require('querystring')
      const that = this
      this.$axios.post('http://localhost:8001/Ld/selectlike', qs.stringify(this.LdForm))
        .then(function (response) {
          console.log(response)
          that.users = response.data
        })
    }
  }
}
</script>

<style scoped>

</style>
